<template>
	<view class="box" :style="theme">
		<u-sticky v-if="cqlist.length>1" bgColor="#fff" style="top: 0;">
			<u-tabs :list="cqlist" keyName="areaName"
				:activeStyle="{fontWeight: 'bolder',fontSize: '28rpx',color: '#222222'}"
				:inactiveStyle="{fontSize: '28rpx'}" @click="tabclick" :current="swiperIndex"></u-tabs>
		</u-sticky>
		<!-- 日期选择 -->
		<scroll-view class="box_time" scroll-x>
			<view class="box_time_item" :class="item.active ? 'rq_active' : ''" v-for="(item, index) in time"
				:key="index" @click="clickTabls(item, index)">
				<text :class="item.active ? 'rq_text_active' : ''">{{item.week}}</text>
				<text :class="item.active ? 'rq_text_active' : ''">{{item.date}}</text>
			</view>
		</scroll-view>
		<!-- 场次选择 -->
		<view v-if="list.length != 0" class="box_cc">
			<view class="box_cc_date">
				<view class="box_cc_date_item"><text></text></view>
				<view class="box_cc_date_item" v-for="(item, index) in timeList" :key="index">
					<text>{{item.beginTime}}-{{item.endTime}}</text>
				</view>
			</view>
			<scroll-view class="box_cc_xm" scroll-x>
				<view class="box_cc_xm_box" v-for="(item, index) in list" :key="index">
					<view class="box_cc_xm_box_item limit-1-line"><text>{{item.siteModelName}}</text></view>
					<view class="box_cc_xm_box_item" :class="items.status != 0 ? 'off': items.Active ? 'active_background' : ''"
						v-for="(items, indexs) in item.sites" :key="indexs"
						@click="clickItem(items, item.siteModelName)">
						<text >{{items.price && items.price!=='0'?'￥' +items.price:'免费' }}</text>
						<!-- <image v-if="items.Active" :src="imgHost+'/changqu_ic_select.png'"></image> -->
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 空数据展示 -->
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据～</view>
		</view>
		<!-- 已选场次 -->
		<!-- 	<view v-if="reserveForm&&reserveForm.length>0" class="box_active">
			<view class="box_active_title">
				<text>已选场次</text>
				<text @click="qkBtn">清空</text>
			</view>
			<view class="box_active_content">
				<view v-for="(item, index) in reserveForm" :key="index" class="box_active_content_item">
					<view class="box_active_content_item_name limit-1-line">{{item.siteModelName}}</view>
					<view class="box_active_content_item_time">
						<text>{{item.beginTime}}-{{item.endTime}}</text>
					</view>
				</view>
			</view>
		</view> -->
		<scroll-view v-if="reserveForm&&reserveForm.length>0" scroll-x class="box_active_content">
			<view class="box_active_content_item" v-for="(item, index) in reserveForm" :key="index"
				@click="clickItemb(index)">
				<view class="box_active_content_item_name"><text class="mr10">{{item.siteModelName}}</text>
					<u-icon name="close" color="#fff" />
				</view>
				<view class="box_active_content_item_time">{{item.beginTime}}-{{item.endTime}}</view>
			</view>
		</scroll-view>
		<!-- 展位 -->
		<view class="seizeAseat"></view>
		<view class="ydfoot">
			<view v-if="!reserveForm || reserveForm.length==0" class="tsBox">
				<!-- <view><text></text>可预定</view> -->
				<view><text></text>已选择</view>
				<view><text></text>不可选</view>
			</view>
			<!-- 底部总金额+提交 -->
			<view class="box_active_footer">
				<view class="box_active_footer_money"><text>￥{{price ||0 }}</text></view>
				<view class="box_active_footer_btn" @click="$noMultipleClicks(submit)">
					{{type==2?'下一步':'提交订单'}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				noClick: true,
				type: 1,
				areaId: '',
				projectId: '',
				id: '',
				active: 0,
				activeIndex: 0,
				cqlist: [],
				daysCount: '',
				maxDay: '',
				time: [],
				Date: '',
				timeList: [],
				list: [],
				siteIds: [],
				reserveForm: [],
				price: 0,
				swiperIndex: 0,
				peerNum: '',
				cdname: '',
				hdxm: '',
				ksList: [],
				jsList: [],
				date: '',
				startTime: '',
				endTime: '',
			}
		},
		onLoad(ops) {
			this.projectId = ops.id
			this.type = ops.type || 1
			this.date = ops.date || ''
			this.peerNum = ops.peerNum
			let projectName = ops.name ? '-' + ops.name : ''
			this.getCqList()
			uni.setNavigationBarTitle({
				title: '预定场地' + projectName,
			});
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			getCqList() {
				this.$app.ajax({
					api: this.$api.cqList(),
					data: {
						param: {
							venueId: this.venueId,
							id: this.projectId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (res.recordList.length > 0) {
							this.cqlist = res.recordList
							this.hdxm = res.recordList[this.swiperIndex].areaName
							this.areaId = res.recordList[this.swiperIndex].id
							this.getDate()
						} else {
							this.cqlist = []
							this.areaId = ''
						}
					}
				}).catch(() => {})
			},
			tabclick(e) {
				this.swiperIndex = e.index;
				this.areaId = this.cqlist[e.index].id
				this.hdxm = this.cqlist[e.index].areaName
				this.getDate()
			},
			clickItem(item, siteModelName) {
				item.siteModelName = siteModelName
				if (item.status != 0) return
				var list = [...this.list]
				let siteIds = [...this.siteIds]
				let reserveForm = [...this.reserveForm]
				if (siteIds.length === 0) {
					siteIds.push(item.id)
					reserveForm.push(item)
				} else {
					let pd = true
					for (let num = 0; num < reserveForm.length; num++) {
						if (reserveForm[num].id === item.id && reserveForm.length > 0) {
							reserveForm.splice(num, 1)
							siteIds.splice(num, 1)
							pd = false
						}
					}
					if (pd) {
						siteIds.push(item.id)
						reserveForm.push(item)
					}
				}
				this.siteIds = siteIds
				this.reserveForm = reserveForm
				for (let i = 0; i < list.length; i++) {
					for (let s = 0; s < list[i].sites.length; s++) {
						if (siteIds.length > 0 && siteIds.indexOf(list[i].sites[s].id) != -1) {
							list[i].sites[s].Active = true
						} else {
							list[i].sites[s].Active = false
						}
					}
				}
				let price = 0
				let cdname = []
				let ksList = []
				let jsList = []
				reserveForm.forEach(em => {
					cdname.push(em.siteModelName)
					ksList.push(em.beginTime)
					jsList.push(em.endTime)
					price = price + em.price
				})
				this.cdname = Array.from(new Set(cdname)).toString()
				this.ksList = ksList
				this.jsList = jsList
				this.list = list
				this.price = price.toFixed(2)
			},
			clickItemb(num) {
				var list = this.list
				let siteIds = this.siteIds
				let reserveForm = this.reserveForm
				reserveForm.splice(num, 1)
				siteIds.splice(num, 1)
				for (let i = 0; i < list.length; i++) {
					for (let s = 0; s < list[i].sites.length; s++) {
						if (siteIds.length > 0 && siteIds.indexOf(list[i].sites[s].id) != -1) {
							list[i].sites[s].Active = true
						} else {
							list[i].sites[s].Active = false
						}
					}
				}
				this.siteIds = siteIds
				this.reserveForm = reserveForm
				let price = 0
				let cdname = []
				let ksList = []
				let jsList = []
				reserveForm.forEach(em => {
					cdname.push(em.siteModelName)
					ksList.push(em.beginTime)
					jsList.push(em.endTime)
					price = price + em.price
				})
				this.cdname = Array.from(new Set(cdname)).toString()
				this.ksList = ksList
				this.jsList = jsList
				this.list = list
				this.price = price.toFixed(2)
			},

			// 获取场次列表
			sessionList() {
				let that = this
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							areaId: this.areaId,
							day: this.Date,
							projectId: this.projectId
						}
					},
					api: this.$api.sessionList()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList || []
						for (let i = 0; i < arr.length; i++) {
							for (let s = 0; s < arr[i].sites.length; s++) {
								arr[i].sites[s].Active = false
							}
						}
						if (arr.length > 0 && arr[0].sites && arr[0].sites.length > 0) {
							this.timeList = arr[0].sites
						} else {
							this.timeList = []
						}
						this.list = arr
					}
				}).catch(() => {})
			},

			// 获取最大时间
			getDate() {
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							areaId: this.areaId,
							projectId: this.projectId
						}
					},
					api: this.$api.getDate()
				}).then((res) => {
					if (res.errorCode === '000000') {
						var myDate = new Date()
						let n = String(myDate.getFullYear())
						let y = String(Number(myDate.getMonth()) + 1).length == 1 ? 0 + String(Number(
							myDate
							.getMonth()) + 1) : String(Number(myDate.getMonth()) + 1)
						let r = String(Number(myDate.getDate())).length == 1 ? 0 + String(Number(myDate
								.getDate())) :
							String(Number(myDate.getDate()))
						this.daysCount = res.record.daysCount
						this.startTime = res.record.startTime || ''
						this.endTime = res.record.endTime || ''

						this.maxDay = n + '-' + y + '-' + r
						this.get7Days()
					}
				}).catch(() => {})
			},
			formatDate() {
				var date = new Date()
				const year = date.getFullYear() + '-'
				const month = this.calculation(date.getMonth() + 1) + '-'
				const day = this.calculation(date.getDate())
				return year + month + day
			},
			calculation(s) {
				return s < 10 ? '0' + s : s
			},
			// 提交订单
			submit() {
				if (this.startTime && this.endTime) {
					let start = this.formatDate() + ' ' + this.startTime + ':00'
					start = start.replace(new RegExp("-", "gm"), "/");
					let end = this.formatDate() + ' ' + this.endTime + ':00'
					end = end.replace(new RegExp("-", "gm"), "/");
					if(Number(new Date()) < Number(new Date(start)) || Number(new Date()) > Number(new Date(end))) {
						return this.$app.showToast('不在可预定时间范围内')
					}
				}
				if (this.siteIds.length === 0) {
					return this.$app.showToast('请选择场次')
				}
				if (this.type == 2) {
					let rsxz = ''
					if (this.peerNum && this.peerNum != 'underfined' && this.peerNum > 0) {
						rsxz = this.peerNum
					} else {
						rsxz = 0
					}
					let ksList = this.ksList
					let jsList = this.jsList
					let ks = ksList[0].replace(":", "")
					let ksIndex = 0
					for (let i = 0; i < ksList.length; i++) {
						if (ks > ksList[i].replace(":", "")) {
							ksIndex = i
						}
					}
					let js = jsList[0].replace(":", "")
					let jsIndex = 0
					for (let i = 0; i < jsList.length; i++) {
						if (js < jsList[i].replace(":", "")) {
							jsIndex = i
						}
					}
					uni.redirectTo({
						url: `/pages/aboutBall/initiateBall?siteIds=${this.siteIds.toString()}&cdname=${this.cdname}&price=${this.price}&xmid=${this.projectId}&cqid=${this.cdname}&rsxz=${rsxz}&fullDate=${this.Date}&hdxm=${this.hdxm}&beginTime=${ksList[ksIndex]}&endTime=${jsList[jsIndex]}`
					})
				} else {
					this.$app.ajax({
						data: {
							userId: this.userInfo.id,
							param: {
								siteIds: this.siteIds,
								projectId: this.projectId,
								type: '0'
							}
						},
						api: this.$api.scheduledSessions()
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.jump('/pages/order/pay?type=1&businessId=', res.record.id + '&orderId=' + res.record.orderId)
						}
					}).catch(() => {})
				}
			},

			// 切换日期
			clickTabls(e, index) {
				if (e.fullDate == this.Date) return
				let arr = [...this.time]
				arr.forEach((s, dex) => {
					if (index === dex) {
						s.active = true
					} else {
						s.active = false
					}
				})
				this.price = 0
				this.time = arr
				this.Date = e.fullDate
				this.list = []
				this.siteIds = []
				this.reserveForm = []
				this.sessionList()
			},
			qkBtn() {
				this.siteIds = []
				this.reserveForm = []
				let arr = this.list || []
				for (let i = 0; i < arr.length; i++) {
					for (let s = 0; s < arr[i].sites.length; s++) {
						arr[i].sites[s].Active = false
					}
				}
				this.price = 0
				this.list = arr
			},

			// 获取日期数组
			get7Days() {
				var now = new Date(this.maxDay);
				var nowTime = now.getTime();
				var oneDayTime = 24 * 60 * 60 * 1000;
				var dataArr = []
				let dateIndex = 0
				for (var i = 0; i < this.daysCount; i++) {
					//显示周一
					var ShowTime = nowTime + i * oneDayTime;
					//初始化日期时间
					var myDate = new Date(ShowTime);
					var year = myDate.getFullYear();
					var month = myDate.getMonth() + 1;
					if (month < 10) {
						month = '0' + month
					}
					var date = myDate.getDate();
					if (date < 10) {
						date = '0' + date
					}
					var fullDate = year + "-" + month + "-" + date
					if (fullDate === this.date) {
						dateIndex = i
					}
					var str = "周" + "日一二三四五六".charAt(myDate.getDay());
					let arr = {
						week: str,
						date: date,
						fullDate: fullDate,
						active: false
					}
					dataArr.push(arr)
				}
				if (dataArr && dataArr.length > 0) {
					dataArr[dateIndex].active = true
					dataArr[dateIndex].today = true
					this.time = dataArr
					this.Date = dataArr[dateIndex].fullDate
					this.sessionList()
				} else {
					this.time = []
					this.Date = ''
					this.price = 0
					this.list = []
					this.siteIds = []
					this.reserveForm = []
				}

			}
		}

	}
</script>
<style scoped lang="scss">
	/* -----------------场次激活等样式----------------------- */
	.active_font_color {
		color: #BBBBBB !important;
	}

	.active_background {
		position: relative !important;
		background: $color !important;
	}

	.active_background image {
		width: 40rpx;
		height: 40rpx;
		position: absolute !important;
		right: 0 !important;
		bottom: 0 !important;
	}

	.active_background text {
		color: #ffffff !important;
	}

	/* -----------------------结束--------------------------- */

	.box_time {
		height: 130rpx;
		white-space: nowrap;
	}

	.box_time_item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100% / 7);
		height: 100%;
		background: $bjColor;
	}

	.box_time_item text:nth-child(1) {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.box_time_item text:nth-child(2) {
		font-size: 28rpx;
		font-weight: 600;
		color: #222222;
		margin-top: 10rpx;
	}

	.rq_active {
		background: $color;
	}

	.rq_text_active {
		color: #FFFFFF !important;
	}

	.box_cc {
		display: flex;
	}

	.box_cc_date {
		width: 180rpx;
		display: flex;
		padding-left: 10rpx;
		flex-shrink: 0;
		flex-direction: column;

		.box_cc_date_item {
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			/* background: #ffffff; */
			margin-bottom: 10rpx;

			text {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.box_cc_xm {
		margin-left: 10rpx;
		white-space: nowrap;
		flex: 1;
		overflow-x: auto;
	}

	.box_cc_xm_box {
		width: 130rpx;
		display: inline-flex;
		flex-direction: column;
	}

	.box_cc_xm_box_item {
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		border-radius: 4px;
		color: #222222;
		&.off {
			background-color: rgb(187,187,187);
			color: #FFFFFF;
		}
	}

	.box_cc_xm_box_item.li {
		background: #fff;
		/* color: #fff; */
	}

	.box_cc_xm_box_item text:nth-child(1) {
		font-size: 24rpx !important;
	}

	.box_cc_xm_box_item text {
		font-size: 26rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
	}

	.box_active {
		padding: 30rpx;
	}

	.box_active_title {
		display: flex;
		margin-bottom: 20rpx;
		justify-content: space-between;
	}

	.box_active_title text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.box_active_title text:nth-child(2) {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.seizeAseat {
		height: 220rpx;
	}

	.box_active_footer {
		width: 100%;
		padding: 16rpx 30rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #ffffff;
	}

	.box_active_footer_money {
		display: flex;
		align-items: center;
	}

	.box_active_footer_money text {
		font-size: 32rpx;
		font-weight: 600;
		color: $red;
	}

	.box_active_footer_btn {
		background: $color;
		width: 180rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 36rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}


	.box_active_content {
		width: 100%;
		position: fixed;
		bottom: 114rpx;
		left: 0;
		right: 0;
		background: #ffffff;
		white-space: nowrap;
		overflow-x: auto;
		box-sizing: border-box;
		padding: 12rpx 30rpx;
	}

	.box_active_content_item {
		/* width: 178rpx; */
		min-width: 176rpx;
		margin-right: 20rpx;
		background: $color;
		border-radius: 4px;
		display: inline-block;
		overflow: hidden;
		border: 1px solid $color;
	}

	.box_active_content_item:last-of-type {
		margin-right: 0;
	}

	.box_active_content_item_name {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 12rpx;
		line-height: 34rpx;
		background: $color;
		display: flex;
		justify-content: space-between;
	}

	.box_active_content_item_time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		text-align: center;
		background-color: #fff;
		color: $color;
		border-radius: 0 0 4px 4px;
	}

	.tsBox {
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
		display: flex;
		padding: 40rpx 30rpx;

		view {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: center;
			line-height: 32rpx;
			margin-right: 40rpx;
			text-align: center;

			text {
				width: 32rpx;
				height: 32rpx;
				background: $color;
				margin-right: 20rpx;
				border-radius: 4rpx;
				display: inline-block;
			}

			&:last-of-type {
				text {
					background: #aaa;
				}
			}
		}
	}

	.ydfoot {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>